<template>
	<div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<header>
					<van-nav-bar @click-left="onClickLeft" :border="false">
						<van-icon name="arrow-left" slot="left" color="#676767" />
					</van-nav-bar>
				</header>
				<section>
					<div>
						<div class="title row-space-between flex-column">
							<div class="lock">

							</div>
							<p>备份助记词</p>
							<span>请准确抄写并安全备份助记词</span>
						</div>
						<div class="words">
							<div v-for="(item,index) in 3" :key="index" class="row-space-between floor">
								<span v-for="(el,ind) in list[index]" :key="ind" v-text="el"></span>
							</div>
						</div>
						<p class="tip">
							警告：助记词是唯一找回钱包密码的重要凭证，请务必记录并 保管好助记词，建议抄写另存！
						</p>
						<router-link class="next row-column-center" to="/sureMnemonic">下一步</router-link>
					</div>
				</section>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				num: 4, //每行几个助记词
			};
		},
		created() {
			let list = localStorage.Mnemonic.split('  ');
			console.log(list);
			let num = Math.ceil(list.length / this.num);
			for(let i = 0; i < num; i++) {
				this.list[i] = list.splice(0, this.num);
			}
		},
		methods: {
			onClickLeft() {
				this.$router.push({
					path: localStorage.backUpBack
				})
			}
		}
	};
</script>
<style lang="less" scoped>
	section {
		width: 335px;
		margin: 0 auto;
	}
	
	.title {
		margin-top: 30px;
		height: 120px;
		text-align: center;
		.lock {
			margin: 0 auto;
			width: 50px;
			height: 50px;
			background-image: url(../../../assets/images/monic_03.png);
			background-size: 100% 100%;
		}
		p {
			font-size: 14px;
			color: #333333;
		}
		span {
			font-size: 12px;
			color: #999;
			margin-bottom: 10px;
		}
	}
	
	.words {
		margin: 0 auto;
		border-top: 1px solid #b8c2cb;
		border-bottom: 1px solid #b8c2cb;
		padding: 5px 0px 26px 0px;
		.floor {
			padding-top: 20px;
		}
		span {
			color: #333333;
			font-size: 12px;
			text-align: center;
			line-height: 20px;
			display: inline-block;
			width: 70px;
			height: 22px;
			background: #eaecf6;
			border-radius: 5px;
		}
	}
	
	.tip {
		margin-top: 20px;
		font-size: 12px;
		color: #fd1717;
	}
	
	.next {
		width: 100%;
		height: 36px;
		line-height: 36px;
		font-size: 12px;
		background: #108ce9;
		border-radius: 7px;
		color: #fff;
		margin-top: 90px;
	}
</style>